<template>
	<div class="time-box">
		<span class="m-r10">选择时间范围</span>
		<div>
			<el-date-picker
				v-model="timeModel"
				type="daterange"
				range-separator="-"
				start-placeholder="请选择开始时间"
				end-placeholder="请选择结束时间"
				format="YYYY-MM-DD"
				value-format="YYYY-MM-DD"
				:teleported="false"
				@change="dateChange"
			/>
		</div>
	</div>
</template>

<script setup>
import { ref } from "vue";
import { ElDatePicker } from "element-plus";

let timeModel = ref();
let getCurrentTime = () => {
	let year = new Date().getFullYear();
	let month = new Date().getMonth() + 1;
	let date = new Date().getDate();
	if (month < 10) {
		month = "0" + month;
	}
	timeModel.value = [`${year}-${month}-${date}`, `${year}-${month}-${date}`];
	emits("timeSelect", timeModel.value);
};
getCurrentTime();
let dateChange = () => {
	emits("timeSelect", timeModel.value);
};
let emits = defineEmits("timeSelect");
</script>
<style lang="scss" scoped>
.time-box {
	display: flex;
	align-items: center;
	padding: 0px 10px;
	> span {
		font-size: 14px;
		font-family: SourceHanSans-Nm, SourceHanSansCN;
		color: #d3e3ff;
	}
	> div {
		width: 50%;
		:deep(.el-range-editor) {
			width: 100%;
			background: url("@/assets/screenImg/commonImg/下拉选择背景.png") no-repeat;
			background-size: 100% 100%;
			border: none;
			box-shadow: none;
			.el-range__icon {
				background: url("@/assets/iconImg/calendar.png") no-repeat;
				background-size: 100%;
				background-position-y: center;
				svg {
					display: none;
				}
			}
			.el-range-separator {
				color: #ffffff;
			}
			.el-range-input {
				font-family: SourceHanSansCN-Nm, SourceHanSansCN;
				color: #ffffff;
			}
		}
		:deep(.el-picker__popper.el-popper) {
			border: none;
			box-shadow: none;
			.el-picker-panel__body {
				background: linear-gradient(180deg, #bfeeff 0%, #4092f7 100%);
				box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05),
					0px 6px 16px 0px rgba(0, 0, 0, 0.08),
					0px 3px 6px -4px rgba(0, 0, 0, 0.12),
					inset 0px 0px 13px 0px rgba(86, 202, 255, 0.39),
					inset 0px -14px 24px 0px rgba(0, 139, 255, 0.32);
				.el-date-range-picker__content {
					border: none;
					.el-date-range-picker__header {
						> div {
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #000000;
						}
					}
					.el-date-table {
						th,
						.el-date-table-cell__text {
							font-family: PingFangSC-Regular, PingFang SC;
							color: #1a1a1a;
						}
						.start-date,
						.end-date {
							.el-date-table-cell__text {
								background: #008bff;
								color: #ffffff;
							}
						}
					}
				}
			}
		}
	}
}
</style>
